/* 所有页面所共用的标准化样式 */
*,
*::before,
*::after {
	box-sizing: border-box;
}
html{
	/* 保证HTML5标准模式下，html元素的高度为铺满屏幕 */
	height: 100%;
	font-size: 14px;
}
body{
	margin: 0;
	font-family: "simhe";
	background-color: #f8f8f8;
	color: #646464;
	height: 100%;
	user-select:none;
	perspective: 1000px;
}
h1,h2,h3,h4,h5,h6,p,ul,ol{
	margin: 0;
}
ul,ol,dl,li{
	padding: 0;
	/* 清除每个列表项前的提示符 */
	list-style: none;
}
a{
	/* 超链接不会继承body的字体颜色，必须手工指定 */
	color: #333;
	text-decoration: none;
}
input,button{
	/* 输入元素和按钮在获得焦点时有外轮廓线，需要清除 */
	outline: none;
}
a>img{
	/* 老IE下，超链接中的图片会自带一圈蓝色边框 */
	border: none;
}
/***定义当前项目常用的辅助类***/
/* 定宽容器 */
.container{
	/*定宽，居中，一般就是内容的最外层容器*/
	width: 1200px;
	margin: 0 auto;
}
.f1>.container{
height: 100%;
width: 100%;
border-top: 20px solid transparent;

}
.f1>.container>.title1{
    width: 100%;
    height: 60px;
    margin-top: 30px;
}
.f1>.container>.title1>img{
    width: 200px;
    height: 60px;
    display: inline-block;
}
.f1>.container>.title2{
    margin-top: 40px;
}
.f1>.container>.title2>span{
    width: 106px;
}
.f1>.container>.title2>span:nth-child(odd){
    padding: 16px 35px 0;
    font-size: 15px;
    color: black;
}
.f1>.container>.title2>span:nth-child(even){
    padding: 16px 0 0;
    color: #e1e1e1;
}
.f1>.container>.title2>.title3>span{
    display: inline-block;
    font-size: 8px;
    color:#e1e1e1;
    width: 106px;
}
.f2>.container{
    width: 2000px;
    padding-top: 40px;

}
.f3,.f4,.f5,.f6,.f7{
    background-image: url(https://img.fishfay.com/theme/images/antacom/text-something.svg);
    background-size: 1200px 110px;
    position: relative;
    background-position-x: center;
    background-position-y: top;
    background-repeat:no-repeat;
}
.f3>.container,
.f4>.container,
.f5>.container,
.f6>.container,
.f7>.container{
    height: 900px;
}
.f3>.container>.title{
    font-family: MFMingHei;
    display: inline-block;
    color: #fff;
    font-style: italic;
    letter-spacing: 3px;
    font-size: 40px;
    font-weight: 600;
    transform: scaleY(1.2);
    margin-left: 1024px;
}
.f3>.container>.box,
.f4>.container>.app,
.f5>.container>.app,
.f6>.container>.app,
.f7>.container>.app{
    padding: 10px;
    background-color: #fff;
    width: 1200px;
    height: 800px;
    display: flex;
    flex-wrap: wrap;
}
.f3>.container>.box>.goods{
    width: 285px;
    height: 350px;
    padding: 15px;
    display: inline-block;
}
.f3>.container>.box>.goods>a>img{
    width: 255px !important;
    height: 255px !important;
}
.f3>.container>.box>.goods:hover{
    width: 285px;
    height: 400px; 
    background-color: #fff;
    transform: translateY(-40px);
    transition: transform 0.5s;
    box-shadow: 1px 1px 1px 1px rgba(0,0,0,.3);
}
.f3>.container>.box>.goods:hover a{
    transform: scale(1);
}
.f3>.container>.box>.goods>a>.DH{
    display: none;
}
.f3>.container>.box>.goods>a>.DH>img{
    border: 1px solid #ccc;
    width: 20px;
    height: 20px;
}
.f3>.container>.box>.goods:hover .DH{ 
    display: block;
    margin-top: 20px;
} 
.f4>.container>img{
    position: relative;
    margin-left: 750px;
    padding: 0px;
}
.f4>.container>.app,
.f5>.container>.app,
.f6>.container>.app,
.f7>.container>.app{
    position: relative;
}
.f4>.container>.app>.down>a,
.f5>.container>.app>.down>a,
.f6>.container>.app>.down>a,
.f7>.container>.app>.down>a{
    font-family: MFMingHei;
    font-style: italic;
    display: inline-block;
    width: 120px;
    height: 26px;
    margin-right: 30px;
    font-size: 25px;
    line-height: 22px;
    letter-spacing: 2px;
    color: #d00;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center right;
    font-weight: 600;
    transform: scaleY(1.2);
    text-align: center;
    position: absolute;
    right: -20px;
    bottom: 25px;
}
.f5>.container>img{
    position: relative;
    margin-left: 670px;
    padding: 0px;
}
.f6>.container>img{
    position: relative;
    margin-left: 820px;
    padding: 0px;
}
.f7>.container>img{
    position: relative;
    margin-left: 820px;
    padding: 0px;
}
.f4>.container>.app,
.f5>.container>.app,
.f6>.container>.app,
.f7>.container>.app{
    position: relative;
} 
.f4>.container>.app>.up,
.f5>.container>.app>.up,
.f6>.container>.app>.up,
.f7>.container>.app>.up{
    position: absolute;
    top: 0px;
    height: 730px;
    display: flex;
    flex: 1;
    position: relative;
}
.f4>.container>.app>.down,
.f5>.container>.app>.down,
.f6>.container>.app>.down,
.f7>.container>.app>.down{
    position: absolute;
    bottom: 20px;
    display: inline-block;
}
.f4>.container>.app>.down>a,
.f5>.container>.app>.down>a,
.f6>.container>.app>.down>a,
.f7>.container>.app>.down>a{
    position: absolute;
    bottom: 0px;
    right: -160px;
}
.f4>.container>.app>.up>.left,
.f5>.container>.app>.up>.left,
.f6>.container>.app>.up>.left,
.f7>.container>.app>.up>.left{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 310px;
    padding: 10px 0;
    display: inline-block;
}
.f4>.container>.app>.up>.right,
.f5>.container>.app>.up>.right,
.f6>.container>.app>.up>.right,
.f7>.container>.app>.up>.right{
    display: inline-block;
    position: absolute;
    right: 0px;
    top: 0px;
    padding: 10px;
    width: 890px;
}
.f4>.container>.app>.up>.right>.box,
.f5>.container>.app>.up>.right>.box,
.f6>.container>.app>.up>.right>.box,
.f7>.container>.app>.up>.right>.box{
    width: 890px;
    height: 730px;
    display: flex;
    flex-wrap: wrap;
}
.f4>.container>.app>.up>.right>.box>.goods,
.f5>.container>.app>.up>.right>.box>.goods,
.f6>.container>.app>.up>.right>.box>.goods,
.f7>.container>.app>.up>.right>.box>.goods{
    width: 285px;
    height: 350px;
    padding: 15px;
    display: inline-block;
}
.f4>.container>.app>.up>.right>.box>.goods>a>img,
.f5>.container>.app>.up>.right>.box>.goods>a>img,
.f6>.container>.app>.up>.right>.box>.goods>a>img,
.f7>.container>.app>.up>.right>.box>.goods>a>img{
    width: 255px !important;
    height: 255px !important;
}
.f4>.container>.app>.up>.right>.box>.goods:hover,
.f5>.container>.app>.up>.right>.box>.goods:hover,
.f6>.container>.app>.up>.right>.box>.goods:hover,
.f7>.container>.app>.up>.right>.box>.goods:hover{
    width: 285px;
    height: 400px; 
    background-color: #fff;
    transform: translateY(-40px);
    transition: transform 0.5s;
    box-shadow: 1px 1px 1px 1px rgba(0,0,0,.3);
}
.f4>.container>.app>.up>.right>.box>.goods:hover a,
.f5>.container>.app>.up>.right>.box>.goods:hover a,
.f6>.container>.app>.up>.right>.box>.goods:hover a,
.f5>.container>.app>.up>.right>.box>.goods:hover a{
    transform: scale(1);
}
.f4>.container>.app>.up>.right>.box>.goods>a>.DH,
.f5>.container>.app>.up>.right>.box>.goods>a>.DH,
.f6>.container>.app>.up>.right>.box>.goods>a>.DH,
.f7>.container>.app>.up>.right>.box>.goods>a>.DH{
    display: none;
}
.f4>.container>.app>.up>.right>.box>.goods>a>.DH>img,
.f5>.container>.app>.up>.right>.box>.goods>a>.DH>img,
.f6>.container>.app>.up>.right>.box>.goods>a>.DH>img,
.f7>.container>.app>.up>.right>.box>.goods>a>.DH>img{
    border: 1px solid #ccc;
    width: 20px;
    height: 20px;
}
.f4>.container>.app>.up>.right>.box>.goods:hover .DH,
.f5>.container>.app>.up>.right>.box>.goods:hover .DH,
.f6>.container>.app>.up>.right>.box>.goods:hover .DH,
.f7>.container>.app>.up>.right>.box>.goods:hover .DH{ 
    display: block;
    margin-top: 20px;
} 










